<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线影评平台</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1 class="mt-5">欢迎来到在线影评平台</h1>

    <h2 class="mt-4">添加电影</h2>
    <form id="movieForm">
        <div class="form-group">
            <label for="title">电影标题:</label>
            <input type="text" class="form-control" id="title" name="title" required>
        </div>
        <div class="form-group">
            <label for="director">导演:</label>
            <input type="text" class="form-control" id="director" name="director" required>
        </div>
        <div class="form-group">
            <label for="description">描述:</label>
            <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
        </div>
        <div class="form-group">
            <label for="releaseDate">发行日期:</label>
            <input type="date" class="form-control" id="releaseDate" name="releaseDate" required>
        </div>
        <button type="submit" class="btn btn-primary">添加电影</button>
    </form>

    <h2 class="mt-4">上传电影海报</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <div class="form-group">
            <label for="uploadMovieId">电影ID:</label>
            <input type="number" class="form-control" id="uploadMovieId" name="movieId" required>
        </div>
        <div class="form-group">
            <label for="file">选择海报文件:</label>
            <input type="file" class="form-control" id="file" name="file" accept="image/*" required>
        </div>
        <button type="submit" class="btn btn-primary">上传海报</button>
    </form>

    <h2 class="mt-4">电影列表</h2>
    <div id="movieList">
        <ul class="list-group"></ul> <!-- 初始为空，JavaScript 会动态填充 -->
    </div>

    <h2 class="mt-4">添加评论</h2>
    <form id="commentForm">
        <div class="form-group">
            <label for="movieId">电影ID:</label>
            <input type="number" class="form-control" id="movieId" name="movieId" required>
        </div>
        <div class="form-group">
            <label for="content">评论内容:</label>
            <textarea class="form-control" id="content" name="content" rows="3" required></textarea>
        </div>
        <div class="form-group">
            <label for="score">评分 (1-5):</label>
            <input type="number" class="form-control" id="score" name="score" min="1" max="5" required>
        </div>
        <button type="submit" class="btn btn-primary">提交评论</button>
    </form>

    <footer class="mt-5">
        <p>&copy; 2024 在线影评平台</p>
    </footer>
</div>

<script>
    // 添加电影的功能
    document.getElementById('movieForm').onsubmit = function(event) {
        event.preventDefault();
        const formData = {
            title: document.getElementById('title').value,
            director: document.getElementById('director').value,
            description: document.getElementById('description').value,
            releaseDate: document.getElementById('releaseDate').value
        };

        fetch('/api/movie', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('请求添加电影时出现错误');
            }
        })
        .then(data => {
            console.log('成功添加电影:', data);
            loadMovies(); // 添加成功后重新加载电影列表
            document.getElementById('movieForm').reset(); // 清空表单
        })
        .catch(error => {
            console.error('错误:', error);
        });
    }

    // 加载电影列表的功能
    function loadMovies() {
        fetch('/api/movie') // 假设此接口返回电影数组
            .then(response => {
                if (!response.ok) {
                    throw new Error('获取电影列表时出现错误');
                }
                return response.json(); // 确保解析为 JSON
            })
            .then(movies => {
                console.log('电影数据:', movies); // 打印电影数据，以便检查
                const movieListElement = document.getElementById('movieList').querySelector('ul');
                movieListElement.innerHTML = ''; // 清空现有电影列表

                // 检查 movies 是否为空
                if (movies.length === 0) {
                    movieListElement.innerHTML = '<li class="list-group-item">没有电影信息</li>';
                    return;
                }

                // 遍历电影并生成 HTML
                movies.forEach(movie => {
                    const movieItem = document.createElement('li');
                    movieItem.className = 'list-group-item';
                    movieItem.innerHTML = `
                        <h5>${movie.title}</h5>
                        <p>${movie.description}</p>
                        <p>导演: <span>${movie.director}</span></p>
                        <p>发行日期: <span>${new Date(movie.releaseDate).toISOString().slice(0, 10)}</span></p>
                        <img src="${movie.posterUrl}" alt="海报" style="width:100px;height:auto;" /> <!-- 显示海报 -->

                    `;
                    movieListElement.appendChild(movieItem); // 添加电影项到列表
                });
            })
            .catch(error => {
                console.error('加载电影列表时出错:', error);
            });
    }

     // 上传电影海报的功能
    document.getElementById('uploadForm').onsubmit = function(event) {
        event.preventDefault();
        const movieId = document.getElementById('uploadMovieId').value;
        const file = document.getElementById('file').files[0];

        const formData = new FormData();
        formData.append('file', file);

        fetch(`/api/movie/${movieId}/upload`, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (response.ok) {
                return response.text(); // 可以根据后端返回的格式调整
            } else {
                throw new Error('上传电影海报时出错');
            }
        })
        .then(data => {
            console.log(data); // 上传成功的信息
            loadMovies(); // 上传后重新加载电影列表
            document.getElementById('uploadForm').reset(); // 清空表单
        })
        .catch(error => {
            console.error('错误:', error);
        });
    };

    // 页面加载时初始化电影列表
    window.onload = function() {
        loadMovies(); // 加载电影列表
    };

    // 添加评论的功能
    document.getElementById('commentForm').onsubmit = function(event) {
        event.preventDefault();
        const commentData = {
            content: document.getElementById('content').value,
            movie: { id: document.getElementById('movieId').value }, // 只提供 ID
            score: document.getElementById('score').value
        };

        fetch('/api/comment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(commentData)
        })
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('添加评论时出现错误');
            }
        })
        .then(data => {
            console.log('成功添加评论:', data);
            document.getElementById('commentForm').reset(); // 清空评论表单
        })
        .catch(error => {
            console.error('错误:', error);
        });
    }
</script>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
